{% extends 'layout/manage.html' %}
{% load static %}
{% load dashboard %}
{% load issuse %}
{% block css %}
    <style>
        .table-right > tbody > tr > td.label-left {
            width: 90px;
        }

        .table-right > tbody > tr > td {
            border: 0;
        }

        .status-count {
            text-align: center;
            margin-top: 10px;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .status-count .count {
            font-size: 25px;
        }

        .status-count a {
            text-decoration: none;
        }

        .user-item .title {
            margin-bottom: 20px;
        }

        .avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .user-item .text {
            line-height: 30px;
        }

        .top-10 .avatar {
            margin-right: 0;
        }

        .top-10 td {
            padding: 5px 10px;
        }

        .top-10 .table > tbody > tr > td {
            border-top: 0;
            border-bottom: 1px solid #ddd;
        }
    </style>

{% endblock %}

{% block cotent %}
    <div class="container-fluid" style="margin-top: 20px;">
        <div class="col-xs-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-search" aria-hidden="true"></i> 新增问题趋势
                </div>
                <div class="panel-body filter-area">
                    <div id="issues_info" style="height: 300px"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-quora" aria-hidden="true"></i>
                            问题
                        </div>
                        <div class="panel-body">
                            {% for key,item in status_dict.items %}
                                <div class="col-sm-4 status-count">
                                    <a href="{% url 'issues' project_id=request.manage.id %}?status={{ key }}">
                                        <div class="count">{{ item.count }}</div>
                                        <div>{{ item.text }}</div>
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-user" aria-hidden="true"></i>
                            项目成员
                        </div>
                        <div class="panel-body user-item">
                            <div class="col-sm-12 title">创建者</div>
                            <div class="clearfix" style="margin-bottom: 30px;">
                                <div class="col-sm-4">
                                    <div class="avatar">{{ request.manage.creator.username.0|upper }}</div>
                                    <div class="text">{{ request.manage.creator.username }}</div>
                                </div>
                            </div>
                            <div class="col-sm-12 title">参与者</div>
                            <div>
                                {% for item in user_list %}
                                    <div class="col-sm-4">
                                        <div class="avatar">{{ item.user__username.0|upper }}</div>
                                        <div class="text">{{ item.user__username }}</div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-search" aria-hidden="true"></i> 详细
                </div>
                <div class="panel-body filter-area">
                    <table class="table table-right">
                        <tbody>
                        <tr>
                            <td class="label-left">项目名称 ：</td>
                            <td>{{ request.manage.name }}</td>
                        </tr>
                        <tr>
                            <td class="label-left">项目描述 ：</td>
                            <td>{{ request.manage.desc }}</td>
                        </tr>
                        <tr>
                            <td class="label-left">创建时间 ：</td>
                            <td>{{ request.manage.create_datetime }}</td>
                        </tr>
                        <tr>
                            <td class="label-left">项目空间 ：</td>
                            <td> {% project_size request.manage.use_space %}
                                / {{ request.manage.project_space }} GB
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-search" aria-hidden="true"></i> 动态
                </div>
                <div class="panel-body filter-area">
                    <table class="table">
                        <tbody>
                        {% for item in top_ten_object %}
                            <tr>
                                <td style="width: 46px;">
                                    <div class="avatar">{{ item.creator.username.0|upper }}</div>
                                </td>
                                <td>
                                    <div>{{ item.creator.username }}</div>
                                    <div>指派
                                        <a href="{% url 'edit' project_id=request.manage.id issues_id=item.id %}">{% Str_tag item.id %}</a>
                                        给 {{ item.assign.username }}
                                    </div>
                                </td>
                                <td style="width: 156px;">
                                    {{ item.create_datetime }}
                                </td>
                            </tr>

                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="{% static 'plugin/highcharts/highcharts.js' %}"></script>
    <script>
        var HICHAR_INFO = "{% url 'char_info' project_id=request.manage.id %}"
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        $(function () {
            init_hichar();
        })

        function init_hichar() {
            var config = {
                title: {
                    text: null   // 不显示标题
                },
                yAxis: {
                    title: {
                        text: '问题数量'
                    }
                },
                tooltip: {
                    headerFormat: '<b>{point.key}</b><br>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span> 数量: {point.y} ',
                    xDateFormat: '%Y-%m-%d',
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    type: 'datetime',
                    tickInterval: 60 * 60 * 24 * 1000,
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%m-%d', this.value);
                        },
                        rotation: -30
                    }
                },
                legend: {
                    enabled: false,
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    }
                },
                series: [{
                    data: [],
                }],

            };
            $.ajax({
                url: HICHAR_INFO,
                type: "GET",
                dataType: "JSON",
                success: function (res) {
                    config.series[0].data = res.data;
                    var chart = Highcharts.chart('issues_info', config);
                }
            })
        }
    </script>
{% endblock %}

